<template>
  <div>
    <div class="topSearchFour">
      <div class="topSearchFourLeft">
        <div>
          <p>名称:</p>
          <el-input
            v-model="form.name"
            :style="{ width: '160px', marginLeft: '20px' }"
            placeholder="名称"
          ></el-input>
        </div>
        <div>
          <p>手机号:</p>
          <el-input
            v-model="form.phone"
            :style="{ width: '160px', marginLeft: '20px' }"
            placeholder="手机号"
          ></el-input>
        </div>
        <div>
          <p>日期选择:</p>
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :style="{ marginLeft: '20px' }"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            @change="handleDate"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="topSearchFourRight">
        <el-button
          type="primary"
          :style="{ marginLeft: '20px' }"
          @click="handleSearch"
        >
          查询
        </el-button>
        <el-button :style="{ marginLeft: '20px' }" @click="handleSearch">
          重置
        </el-button>
      </div>
    </div>
    <div class="member">
      <div class="tableDiv">
        <!-- <div>
        <el-input
          v-model="form.name"
          :style="{ width: '160px', marginLeft: '20px' }"
          placeholder=" 名称"
        ></el-input>
        <el-input
          v-model="form.phone"
          :style="{ width: '160px', marginLeft: '20px' }"
          placeholder="手机号"
        ></el-input>
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :style="{ marginLeft: '20px' }"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          @change="handleDate"
        >
        </el-date-picker>
        <el-button
          :style="{ marginLeft: '20px' }"
          circle
          icon="el-icon-search"
          @click="handleSearch"
        ></el-button>
      </div> -->
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="headerCellStyle"
        >
          <el-table-column
            type="selection"
            min-width="60"
            align="center"
          ></el-table-column>
          <el-table-column
            label="排序"
            prop="sort"
            min-width="60"
            align="center"
          >
            <template slot-scope="scope">
              <div class="flex-container">
                <span class="flex-item">
                  {{ scope.$index + 1 }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            min-width="300"
            label="姓名"
            align="center"
          >
            <template slot-scope="scope">
              <div class="cell_1">
                <img :src="scope.row.img" alt="" />
                <p>{{ scope.row.name }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="sex"
            min-width="100"
            label="性别"
            align="center"
          >
            <template slot-scope="scope">
              <p>{{ scope.row.sex == "G" ? "女" : "男" }}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="phone"
            min-width="150"
            label="手机号"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="idCard"
            label="身份证号"
            align="center"
            min-width="200"
          >
          </el-table-column>
          <el-table-column
            prop="birthday"
            label="生日"
            align="center"
            min-width="200"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            align="center"
            min-width="200"
          >
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
              >
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <div class="paging">
        <el-pagination
          :page-size="pagination.pageSize"
          :current-page.sync="pagination.pageNo"
          :total="pagination.total"
          layout="total, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div> -->
        <div class="paging">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.pageNo"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
          >
          </el-pagination>
        </div>
        <!-- 查看的弹框 -->
        <el-dialog :visible.sync="dialogVisible" width="30%">
          <span>
            <el-form ref="formData" :model="formData" label-width="80px">
              <el-form-item label="姓名">
                <el-input v-model="formData.name"></el-input>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="formData.phone"></el-input>
              </el-form-item>
              <el-form-item label="身份证号">
                <el-input v-model="formData.idCard"></el-input>
              </el-form-item>
            </el-form>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">
              确 定
            </el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserList } from "@/api/mallApi/member/member.js";
export default {
  name: "AaMemberlist",

  data() {
    return {
      dialogVisible: false,
      loading: true,
      tableData: [],
      searchName: "",
      searchPhone: "",
      searchDate: "",
      filterList: [],
      value1: "",
      formData: {
        name: "",
        phone: "",
        idCard: "",
      },
      form: {
        name: "",
        phone: "",
        pageSize: 10,
        pageNo: 1,
        searchBeginTime: "",
        searchEndTime: "",
      },
      //分页
      pagination: {
        total: 0,
        pageSize: 10,
        pageNo: 1,
      },
    };
  },
  mounted() {
    this.getmemberList();
  },
  methods: {
    headerCellStyle({ column }) {
      if (column.label === "姓名") {
        return { background: "#f8f8f8", color: "#2b2b2b" };
      } else if (column.label === "手机号") {
        return { background: "#f8f8f8", color: "#2b2b2b" };
      } else if (column.label === "排序") {
        return { background: "#f8f8f8", color: "#2b2b2b" };
      } else if (column.label === "开始时间") {
        return { background: "#f8f8f8", color: "#2b2b2b" };
      } else if (column.label === "操作") {
        return { background: "#f8f8f8", color: "#2b2b2b" };
      } else if (column.label === "性别") {
        return { background: "#f8f8f8", color: "#2b2b2b" };
      } else if (column.label === "身份证号") {
        return { background: "#f8f8f8", color: "#2b2b2b" };
      } else if (column.label === "生日") {
        return { background: "#f8f8f8", color: "#2b2b2b" };
      } else if (column.label === "结束时间") {
        return { background: "#f8f8f8", color: "#2b2b2b" };
      }
    },
    handleClick(row) {
      this.dialogVisible = true;
      this.formData.name = row.name;
      this.formData.phone = row.phone;
      this.formData.idCard = row.idCard;
    },
    //获取会员列表数据
    getmemberList() {
      this.tableData = [];
      getUserList(this.form).then((res) => {
        this.tableData = res.data.list;
        this.pagination.total = Number(res.data.total);
        this.loading = false;
      });
    },
    //搜索
    handleSearch() {
      this.getmemberList();
    },
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.getmemberList();
    },
    handleCurrentChange(val) {
      this.form.pageNo = val;
      this.getmemberList();
    },
    //更改日期
    handleDate(value) {
      console.log("日期变更", value);
      if (value == null) {
        this.form.searchBeginTime = null;
        this.form.searchEndTime = null;
      } else {
        this.form.searchBeginTime = value[0];
        this.form.searchEndTime = value[1];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.topSearchFour {
  width: 98%;
  margin: 1%;
  background-color: #fff;
  min-height: 75px;
  display: flex;
  justify-content: space-between;
  .topSearchFourLeft {
    width: 1000px;
    display: flex;
    margin-top: 10px;
    margin-left: 10px;
    > div {
      display: flex;
      align-items: center;
      margin-left: 10px;
      p {
        font-size: 14px;
      }
    }
  }
  .topSearchFourRight {
    width: 200px;
    display: flex;
    align-items: center;
  }
}
.paging {
  width: 99%;
  height: 50px;
  display: flex;
  align-items: end;
  justify-content: end;
}

.member {
  width: 98%;
  min-height: 750px;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 1%;
  background-color: #fff;
  overflow: hidden;
  .tableDiv {
    width: 98%;
    margin-left: 1%;
    margin-top: 15px;
    margin-bottom: 15px;
    .cell_1 {
      display: flex;
      align-items: center; /* 垂直居中 */
      justify-content: space-around;

      > img {
        width: 60px;
        height: 60px;
      }

      p {
        width: 150px;
        height: 40px;
        -webkit-line-clamp: 2; /* 显示两行文本 */
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      //表格
      // .flex-container {
      //   display: flex;
      //   align-items: center; /* 垂直居中 */
      //   justify-content: space-around;

      //   > img {
      //     width: 70px;
      //     height: 70px;
      //   }

      //   .flex-item {
      //     width: 150px;
      //     height: 40px;
      //     -webkit-line-clamp: 2; /* 显示两行文本 */
      //     -webkit-box-orient: vertical;
      //     overflow: hidden;
      //   }
      // }
    }
  }
}

::v-deep .inp {
  width: 200px;
}
</style>
